import React from 'react';
import { Layout, Dropdown, Menu, Avatar}   from 'antd';
import { MenuUnfoldOutlined, MenuFoldOutlined, UserOutlined } from '@ant-design/icons';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

const {Header} = Layout;


function TopHeader (props) {
    // console.log(props);

    const changeCollapsed = () => {
        // setCollapsed(!collapsed);
        props.changeCollapsed();
    };

    const {role:{roleName},username} = JSON.parse(localStorage.getItem("token"));

    const menu = (
        <Menu>
            <Menu.Item>{roleName}</Menu.Item>
            <Menu.Item danger onClick={ () => { 
                localStorage.removeItem('token') 
                props.history.replace('/login') }}>退出</Menu.Item>
        </Menu>
    );

    return (
        <Header className='site-layout-background' style={{padding: '0 16px'}}>
            { 
                props.isCollapsed ? <MenuUnfoldOutlined onClick={changeCollapsed}/> : <MenuFoldOutlined onClick={changeCollapsed} /> 
            }
            <div style={{float: 'right'}}>
                <span> 欢迎 <span style={{color:"#1890ff"}}>{username}</span>回来</span>
                <Dropdown overlay={menu}>
                    <Avatar size="default" icon={< UserOutlined/>}></Avatar>
                </Dropdown>
            </div>
        </Header>
    )
}


    //更新props
//    const mapStateToProps = ({CollApsedReducer:{isCollapsed}}) => {
//         return {
//             isCollapsed
//         }
//    }
    const mapStateToProps = (state) => {
        // console.log(state) //{CollApsedReducer: {…}, LoadingReducer: {…}}
        return {
            isCollapsed: state.CollApsedReducer.isCollapsed
        }
    }
   
   //更新action, 触发action更新reducer,进而更新state
   const mapDispatchToProps = {
       // 事件就是动作，因为事件是无法进行传递的，唯一能够传递的内容只有属性 props.changeCollapsed()
       // mapDispatchToProps只做派发操作，不做具体动作执行
       changeCollapsed () {
           return {
               type: 'change_collapsed'
           }
       }
   }

    /*
    connect(mapStateToProps , mapDispatchToProps)(被包装的组件APPUI)
    用于从 UI组件 生成 容器组件
    */

export default connect(mapStateToProps,mapDispatchToProps)(withRouter(TopHeader));